<template>
	<div class="modal fade" id="{{id}}">
		<div class="modal-dialog">
			<div class="modal-content">
			    <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			        	<span aria-hidden="true">&times;</span>
			        </button>
			        <h4 class="modal-title">{{title}}</h4>
			  	</div>
			  	<div class="modal-body">
			    	<slot name="msg"></slot>
			  	</div>
			  	<div class="modal-footer" v-if="type == 'confirm'">
			    	<button type="button" class="btn btn-default btn-black" data-dismiss="modal">{{closeBtn.text}}</button>
			    	<button type="button" class="btn btn-primary" @click="onConfirm" v-if="type == 'confirm'">{{confirmBtn.text}}</button>
			  	</div>
			</div>
		</div>
	</div>
</template>

<style lang="sass">
.modal {
	color: #333 !important;
}
img{
	max-width:100%;
}
.modal-footer .btn-black{
	background: black;
	border-bottom:0;
}

</style>

<script >
export default {
	replace: true,
	props: {
		dataId          : '',          // ID
		dataShow        : new Boolean, // 是否立即显示
		dataType        : '',          // 类型:alert、confirm、popup
		dataSize        : '',          // 尺寸大小
		dataTitle       : '',          // 标题
		dataBackdrop    : '',          // 阴影层
		dataCloseBtn    : new Object,  // 关闭按钮
		dataConfirmBtn  : new Object   // 保持按钮
	},
	data() {

		let [dataCloseBtn, dataConfirmBtn] = [{}, {}];

		if (_.isObject(this.dataCloseBtn))    dataCloseBtn   = this.dataCloseBtn;
		if (_.isObject(this.dataConfirmBtn))  dataConfirmBtn = this.dataConfirmBtn;

		return {
			id          : this.dataId,
			show        : this.dataShow,
			type        : this.dataType,
			size        : this.dataSize,
			title       : this.dataTitle,
			backdrop    : this.dataBackdrop ? true : false,
			closeBtn: {

				text: dataCloseBtn.text ? dataCloseBtn.text : 'close'
			},
			confirmBtn: {

				text: dataConfirmBtn.text ? dataConfirmBtn.text : 'confirm'
			}
		}
	},
	watch: {
		'dataTitle': {
			handler: function(val) {
                this.$set("title",val);
			}
		}
	},
	methods: {
		/**
		 * 确认事件
		 * @function
		 * @name onConfirm
		 */
		onConfirm() {

			this.confirm();
		},

		/**
		 * 显示模态框
		 * @return {[type]} [description]
		 */
		shows() {

			let target = $('#' + this.$get('id'));

			target.modal('show');

			//this.shown();
		},

		/**
		 * 隐藏模态框
		 * @return {[type]} [description]
		 */
		hides() {

			let target = $('#' + this.$get('id'));

			target.modal('hide');

			this.hidden();

		},

		/**
		 * 显示回调
		 * @function
		 * @name shown
		 */
		shown() {},

		/**
		 * 隐藏回调
		 * @function
		 * @name hidden
		 */
		hidden() {},

		/**
		 * 确认回调
		 * @function
		 * @name confirm
		 */
		confirm() {}
	},
	ready() {

		let self = this;

		let id = self.$get('id');

		if (!id)  return false;

		let target = $('#' + id);

		target.modal({

			backdrop : self.$get('backdrop'),
			show     : self.$get('show')
		});

		// 模态框隐藏事件
		target.on('hidden.bs.modal', function (e) {

			self.hidden(e);
		});

		// 模态框显示事件
		target.on('shown.bs.modal', function (e) {

			self.shown(e);
		});
	}
}
</script>